import React,{useState,useEffect} from 'react';
import { Card, List,Drawer,Button  } from 'antd';
import { useSelector, useDispatch } from 'react-redux'
import { getArticleList } from "../../store/counterSlice";
import { getTian } from "../../apis/apis";
function Article() {
    const {articleData,count} = useSelector(state => state.counter)
  const dispatch = useDispatch()
  const [data,setData]=useState({
    page:1,//页码  必传
pageSize:10,//每页显示条数 必传
keyword:null,//搜索标题
tag:null//搜索标签

  })
  const aa=async()=>{
    const res=await instance.get('/article/list',{
        params:data
    }).then(res=>{
        dispatch(getArticleList(res))
        setFy({
            ...fy,
            total:res.count
        })
    })
  }
  useEffect(()=>{
    aa()
  },[data,dispatch])
  const dd=(diss)=>{
    setData({
        ...data,
        page:diss.current,
        pageSize:diss.pageSize
    })
    
  }
  const das=async()=>{
    console.log(111);
    const res=await getTian()
    
  }
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  
  const shang=()=>{
    
    localStorage.setItem('order',true)
  }
  const ce=()=>{
    
    localStorage.setItem('order',false)
  }
//   const lian=()=>{
//     setAa('3')
//     localStorage.setItem('order','sandai')
//   }
//   localStorage.setItem('order',{aa==='1'?'1':'2'})
  
    return (
        <div>
            <Button type="primary" onClick={showDrawer}>
        设置
      </Button>
      <Drawer
        title="Basic Drawer"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
        <h3>选择布局</h3>
        <Button type="primary" onClick={shang} >上方布局</Button>
        <Button type="primary" onClick={ce} >侧面布局</Button>
        {/* <Button type="primary" onClick={lian} >联动布局</Button> */}
      </Drawer>
           <List onClick={das}>
            <List.Item>
        <Card className='dda'>+</Card>
      </List.Item>
           </List>
             <List
    grid={{ gutter: 16, column: 4 }}
    dataSource={articleData}
    renderItem={(item) => (
        <div>
            
      <List.Item>
        <Card title={item.title}>{item.content}</Card>
      </List.Item></div>
    )}
  />
        </div>
    );
}

export default Article;